<div style="font-family: 'Arial Rounded MT Bold', 'Comic Sans MS', cursive, sans-serif; max-width: 600px; margin: 20px auto; background: #f9f0ff; border-radius: 15px; padding: 25px; box-shadow: 0 5px 15px rgba(93, 0, 150, 0.2); border: 3px solid #9d4edd;">
    <!-- 标题 -->
    <h1 style="color: #5a189a; text-align: center; margin-bottom: 25px; border-bottom: 2px dashed #c77dff; padding-bottom: 10px;">
         {{ question.question_text }} 
    </h1>
    
    <!-- 投票结果列表 -->
    <ul style="list-style-type: none; padding: 0; margin: 0;">
    {% for choice in question.choice_set.all %}
    <li style="margin-bottom: 15px; background: white; border-radius: 10px; padding: 12px 15px; border-left: 5px solid #9d4edd; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); position: relative;">
        <span style="font-weight: bold; color: #5a189a;">🎀 {{ choice.choice_text }}</span>
        <span style="color: #9d4edd; float: right;">
            {{ choice.votes }} vote{{ choice.votes|pluralize }}
        </span>
        <span style="position: absolute; bottom: 5px; right: 10px; font-size: 12px; color: #ff9ff3;">
            {% if choice.votes > 0 %}💜{% else %}🖤{% endif %}
        </span>
        <!-- 修复后的投票条 -->
        <div style="height: 5px; background: #ebd5ff; margin-top: 8px; border-radius: 5px;">
            {% with width_percentage=choice.votes|default:0|floatformat:0 %}
            <div 
                style="height: 100%; 
                       width: {{ width_percentage }}%; 
                       background: linear-gradient(90deg, #9d4edd, #5a189a); 
                       border-radius: 5px;"
            ></div>
            {% endwith %}
        </div>
    </li>
    {% endfor %}
    </ul>
    
    <!-- 底部按钮 -->
    <div style="text-align: center; margin-top: 30px;">
        <a href="{% url 'polls:detail' question.id %}" style="display: inline-block; background: linear-gradient(135deg, #5a189a, #9d4edd); color: white; text-decoration: none; padding: 12px 25px; font-size: 16px; border-radius: 30px; font-weight: bold; box-shadow: 0 4px 8px rgba(93, 0, 150, 0.3); transition: all 0.3s;" 
           onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 12px rgba(93, 0, 150, 0.4)'" 
           onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 8px rgba(93, 0, 150, 0.3)'">
            VOTE AGAIN? 💜
        </a>
    </div>
</div>